<script setup lang="ts">
 
import { ref, watch } from 'vue'

//默认传入参数
const props = withDefaults(
  defineProps<{
    loading?: boolean
  }>(),
  { loading: true },
)

const loaderVisible = ref(props.loading)
const contentVisible = ref(!props.loading)

// 监听 loading 变化
watch(
  //监听的值
  () => props.loading,
  //新的值，旧的值
  (loading) => {
    loaderVisible.value = loading
    setTimeout(() => {
      contentVisible.value = !loading
    }, 300)
  },
)
</script>

<template>
  <div>
    <!--加载动画-->
    <transition name="load">
      <div v-show="loaderVisible">
        <slot name="load"></slot>
      </div>
    </transition>
    <!--内容-->
    <transition name="content">
      <div v-show="contentVisible">
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>

<style scoped></style>
